﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<title>Table</title>
	<link rel="stylesheet" href="/static/plugins/layui/css/layui.css" media="all"/>
	<link rel="stylesheet" href="/static/css/global.css" media="all"/>
	<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="/static/css/table.css"/>
	<style type="text/css">
		.applist {
		}

		.applist li {
			float: left;
			width: 24%;
		}
	</style>
</head>
<body>
<div class="admin-main">
	<blockquote class="layui-elem-quote">
		<a href="./list.html" class="layui-btn layui-btn-small"> <i class="layui-icon">&#xe608;</i> 配置列表 </a>
	</blockquote>

	<form class="layui-form" action="/admin/config/edit">
		<div class="layui-form-item">
			<label class="layui-form-label">全局配置</label>
			<div class="layui-input-block">
				<input type="checkbox" name="global" value="true" lay-skin="switch" lay-text="是|否"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所属环境</label>
			<div class="layui-input-block">
				<select id="env" name="env" lay-verify="required" asnycSelect="/admin/profile/options"
						lay-filter="env_select">
					<option value="">请选择环境</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item" id="div_app_list">
			<label class="layui-form-label">绑定应用</label>
			<div class="layui-input-block">
				<ul id="applist" class="applist" templateLoad="/admin/app/options" template-id="checklist_tpl"
					onFinishCallback="onFinishCallback"></ul>
				<script type="text/html" id="checklist_tpl">
					{{# layui.each(d, function(index, item){ }}
					<li><input type="checkbox" name="appIds" lay-skin="primary" title="{{ item.text }}"
							   value="{{ item.value }}"></li>
					{{# }); }}
				</script>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">配置类型</label>
			<div class="layui-input-block">
				<input type="radio" name="type" value="1" title="配置文件" checked=""/>
				<input type="radio" name="type" value="2" title="配置项"/>
				<input type="radio" name="type" value="3" title="JSON"/>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">配置名</label>
				<div class="layui-input-inline" style="width: 200px;">
					<input type="text" id="fileName" name="name" required="" lay-verify="required"
						   placeholder="请输入配置名或者直接上传" autocomplete="off" class="layui-input" style="width:200px;"/>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<input type="file" name="file" lay-title="上传配置文件" class="layui-upload-file">
				</div>
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">配置内容</label>
			<div class="layui-input-inline" style="width: 750px;">
				<textarea id="fileContent" name="contents" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="button" id="content_pop_btn" class="layui-btn layui-btn-warm layui-btn-min" value="全屏显示"/>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="button" class="layui-btn J_ajaxSubmit" onSuccessJumpurl="./list.html" value="保存"/>
				<input type="reset" class="layui-btn layui-btn-primary" value="重置"/>
			</div>
		</div>
	</form>
</div>

<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/common.js?v20180106?a=91"></script>
<script type="text/javascript">
	layui.use(['layer', 'upload'], function () {
		var $ = layui.jquery, layer = layui.layer;
		layui.upload({
			url: '/admin/config/upload',
			method: 'POST',
			ext: 'properties|xml|yml',
			before: function (input) {
				console.log('文件上传中');
			},
			success: function (res) {
				if (res.code == 200) {
					$('#fileContent').val(res.data.content);
					$('#fileName').val(res.data.fileName);
				} else {
					layui.layer.msg(res.msg, {icon: 5});
				}
			}
		});
		//
		$("body").on('click', ".layui-form-switch", function () {
			var $selected = $(this).hasClass('layui-form-onswitch');
			if ($selected) {
				$("#div_app_list").hide();
			} else {
				$("#div_app_list").show();
			}
			//form.render('select');
		});

		//
		$('#content_pop_btn').on('click', function () {
			parent.layer.open({
				type: 1
				,
				area: ['1024px', '660px']
				,
				title: '编辑配置内容'
				,
				shade: 0.6 //遮罩透明度
				,
				maxmin: true //允许全屏最小化
				,
				anim: 1 //0-6的动画形式，-1不开启
				,
				content: '<div style="padding:5px;"><textarea id="pop_fileContent" style="width:1000px;height:550px;border:1px dashed #000;">' + $('#fileContent').val() + '</textarea> </div>'
				,
				btn: ['确认']
				,
				yes: function (index, layero) {
					var content = $('#pop_fileContent', window.parent.document).val();
					$('#fileContent').val(content);
					parent.layer.close(index);
				}
			});
		});
	});

	function onFinishCallback() {
		layui.form().render();
	}
</script>
</body>
</html>